<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <style>
        html,
        body,
        #map {
            height: 100%;
        }

        .form-inline {
            display: inline;
        }

        #coordinateBox {
            width: 500px;
            height: 200px;
            overflow: auto;
            background: #00f6;
            color: #fff;
            position: absolute;
            z-index: 333;
        }
    </style>
    <title>一个最简单的例子</title>
    <link rel="stylesheet" href="../library/ol/ol.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>

<body>
    <form class="form-inline">
        <label>Geometry type &nbsp;</label>
        <select id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
            <option value="None">None</option>
        </select>
        <select id="projection">
            <option value="EPSG:3857">EPSG:3857</option>
            <option value="EPSG:4326">EPSG:4326</option>
        </select>
    </form>
    <button id="toggle">TOGGLE BOX</button>
    <div id="coordinateBox">
        <span> </span> 
    </div>
    <div id="map" class="map"></div>
    <script src="../library/ol/ol-debug.js"></script>
    <script src="./js/common.js"></script>
    <script type="text/javascript">
        $(function() {

            $("#toggle").click(function() { $("#coordinateBox").toggle() })

            // 水平地包裹世界。如果要在-180°和180°经络之间进行矢量编辑才能正常工作，则应将其设置为false。由此产生的几何坐标将超过世界范围。
            var source = new ol.source.Vector({
                wrapX: false
            })
            var vector = new ol.layer.Vector({
                source: source,
                // 自定义点线面样式
                style: new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#ffcc33',
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 7,
                        fill: new ol.style.Fill({
                            color: '#ffcc33'
                        })
                    })
                })
            });

            // add gaode
            var gaodeMapLayer = new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                })
            });

            var map = new ol.Map({
                layers: [gaodeMapLayer, vector],
                view: new ol.View({
                    center: [13404016.389345577, 4314908.465212342],
                    // projection: 'EPSG:4326',
                    zoom: 4
                }),
                target: 'map'
            })

            var typeSelect = document.getElementById('type');

            var draw; // global so we can remove it later
            function addInteraction() {
                var value = typeSelect.value;
                if (value !== 'None') {
                    draw = new ol.interaction.Draw({
                        source: source,
                        // type: lineString,
                        type: typeSelect.value
                    });
                    map.addInteraction(draw);
                    // 绘制完成，获取坐标
                    draw.on('drawend', function(event) {
                        // event.feature 就是当前绘制完成的线的Feature
                        var points = JSON.stringify(event.feature.getGeometry().getCoordinates());
                        $('#coordinateBox>span').html(points)
                        // @todo 删除之前画的
                    });
                }
            }

            /**
             * Handle change event.
             */
            typeSelect.onchange = function() {
                map.removeInteraction(draw);
                addInteraction();
            };
            addInteraction();

        })
    </script>
</body>